<template>
	<view class="wrap">
		<radio-group @change="change($event, item.configId)">
			<view class="tit" :class="[item.required ? 'inputRequired' : '', className]">
				<text v-text="index + 1 + '.'" v-if="item.showIndex"></text>
				<text v-text="item.label"></text>
			</view>
			<label class="radioItem" v-for="(ele, index) in item.items" :key="index">
				<radio :value="ele.value" :checked="item.value == ele.value" :disabled="item.disabled" color="#007AFF" />
				<text>{{ ele.name }}</text>
			</label>
		</radio-group>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	data() {
		return {};
	},
	methods: {
		...mapActions(['setClassName']),
		change(e, id) {
			this.item.value = e.detail.value;
			this.$emit('radioChange', this.item);
			this.EventBus.emit('radioChange', { key: this.item.label, value: this.item.value });
		}
	},
	created() {},

	components: {},
	computed: {
		className() {
			return this.$store.getters.className;
		}
	},
	props: {
		item: {
			type: Object,
			required: true
		},
		index: {
			type: Number
		}
	},
	onUnload() {
		this.setClassName('');
	}
};
</script>

<style lang="scss" scoped>
.wrap {
	margin: 20upx 50upx;
}

radio-group {
	width: 100%;

	margin-bottom: 50upx;
}

.tit {
	font-size: 28upx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	// color: rgba(51, 51, 51, 1);
	margin-bottom: 30upx;
	color: #3c68e5;
}

.radioItem {
	display: inline-block;
	width: 45%;
	radio {
		transform: scale(0.7);
	}
	text {
		font-size: 28upx;
		font-family: Source Han Sans CN;
		color: rgba(51, 51, 51, 1);
	}
}
.blue {
	text {
		color: #007aff !important;
		font-size: 34upx;
	}
}
</style>
